<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
  <img src="/favicon.ico" alt="" />
  <!-- <HelloWorld msg="Hello Vue 3.0 + Vite" /> -->
  <!-- <ToDoMvc></ToDoMvc> -->

  <!-- 使用vuex -->
  <div>{{ count }} - {{ userName }}</div>
  <button @click="add">+10</button>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script>
import HelloWorld from "/comp/HelloWorld.vue";
import ToDoMvc from "./components/ToDoMvc.vue";
import { useStore } from "vuex";
import { toRefs, computed, ref } from "vue";
export default {
  name: "App",
  components: {
    HelloWorld,
    ToDoMvc,
  },
  setup() {
    // 获取vuex实例
    const store = useStore();

    // 点击按钮追加count，并修改 userName
    function add() {
      // 使用 store.commit 函数来调用vuex中的值，第一个参数是要调用的方法名，第二参数是传递过去的参数
      store.commit("addCount", 10);
      store.commit("setUserName", "张三");
      console.log(store.state.userName);
    }

    /**
     * fetch是全局量window的一个方法，第一个参数为URL。
     * url参数是必须要填写的，option可选，设置fetch调用时的Request对象，如method、headers等
      * method - 支持 GET, POST, PUT, DELETE, HEAD
      * url - 请求的 URL
      * headers - 对应的 Headers 对象
      * body - 请求参数（JSON.stringify 过的字符串或’name=jim\u0026age=22’ 格式) 
      fetch("/users.json", {
        method: "POST",
        body: JSON.stringify({
          email: "huang@163.com",
          name: "jim",
        }),
      }).then(e => e.json).then(res=>{
        console.log(res)
      });
     * fetch()方法与XMLHttpRequest类似，fetch也可以发起ajax请求，但是与XMLHttpRequest不同的是，fetch方式使用Promise，相比较XMLHttpRequest更加的简洁。
     * fetch方法的then会接收一个Response实例，值得注意的是fetch方法的第二个then接收的才是后台传过来的真正的数据，一般第一个then对数据进行处理等。
     */
    fetch("/api/users")
      .then(response => response.json())
      .then(json => {
        console.log(json);
      });

    return {
      // 展开 store.state
      ...toRefs(store.state),
      add,
    };
  },
};
</script>
